<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="yh-bgf yh-pd30">
				<view class="flex flex_end">
					<uni-icons @click="close" type="close" size="20" color="#999999"></uni-icons>
				</view>
				<view class="yh-tc yh-fc333 yh-fz36 yh-fw600">
					申请协调
				</view>
				<view class="yh-bcF5 level_align yh-h88 yh-ptb0lr20 yh-mt20">
					联系电话<input type="number" value="" v-model="mobile" maxlength="11" class="yh-ml20" placeholder="请填写联系电话" />
				</view>
				<view class="yh-bcF5 yh-pd20 yh-mt20">
					<textarea placeholder="请在此描述原因" placeholder-class="yh-fc999" v-model="content" class="yh-w100"
						style="height: 120rpx;"></textarea>
				</view>

				<view class="yh-mt20 flex">
					<view class="yh-pr yh-mr15" v-for="(item,index) in list" :key="index">
						<image class="imgs" @click="previewImg(item,list)" :src="item" mode="aspectFill"></image>
						<uni-icons @click="delImg(index)" class="yh-pa" style="top: -8rpx;right: -6rpx;" type="clear"
							size="18" color="#999999"></uni-icons>
					</view>
					<image @click="handleChooseImg()" v-if="list.length < 3" class="yh-w120 yh-h120 yh-mr20"
						src="../static/mine/upPingzheng.png" mode="aspectFill"></image>
				</view>
				<view class="yh-pd30">
					<button @click="submit" type="primary" :ripple="true" shape="circle">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "xietiao",
		props: {
			order_id: [String,Number]
		},
		data() {
			return {
				content: '',
				mobile: '',
				list: [], // 图片
				images: [],
			};
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			// 提交
			 submit() {
				 if (!this.mobile.length) return uni.showToast({
				 	title: '请填写手机号',
				 	icon: 'none'
				 })
				 if (!this.$RegExpPhone.test(this.mobile)) return uni.showToast({
				 	title: '请检查手机号',
				 	icon: 'none'
				 })
				if (!this.content.length) return uni.showToast({
					title: '请填写原因',
					icon: 'none'
				})
				if (!this.list.length) return uni.showToast({
					title: '请上传凭证',
					icon: 'none'
				})
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				this.$http.post(this.$api.coordinate, {images: this.images.join(','), order_company_id: this.order_id, mobile: this.mobile, content: this.content }).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							mask: true
						})
						setTimeout(() => {
							this.close()
						},600)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			// 选择图片上传
			handleChooseImg() {
				uni.showToast({
					title: '加载中...',
					icon: 'loading'
				})
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: ({
						tempFilePaths
					}) => {
						uni.uploadFile({
							url: this.$baseUrl + this.$api.uploadOne,
							filePath: tempFilePaths[0],
							name: 'img',
							header: {
								'Content-Type': 'multipart/form-data'
							},
							formData: {
								'token': uni.getStorageSync('token'),
							},
							success: (uploadFileRes) => {
								console.log('data', JSON.parse(uploadFileRes.data));
								let res = JSON.parse(uploadFileRes.data)
								if (res.code === 200) {
									this.images.push(res.data.id)
									this.list.push(res.data.path)
								}

							}
						})
					},
					complete() {
						uni.hideToast()
					}
				});
			},
			delImg(index) {
				this.list.splice(index, 1)
				this.images.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss">
	.imgs {
		width: 220rpx;
		height: 220rpx;
	}
</style>
